<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Textured menu</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" src="SpeechRecognizer.js"></script>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/jquery.hammer.js"></script>
<script src="js/hammer.js"></script>
<script type="text/javascript" src="barcodescanner.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var temp;
	$(window).resize(function(){
		$('.test').css({ width: $(window).width()/2 - $('.central').width()/2});
		$('.submenu').css({ left: ($(window).width() - $('.submenu').outerWidth())/2 });		
	});
	$(window).resize();

	$(function(){
		var pos = 'down';
		$('.censearch').hammer({prevent_default:true}).bind('tap', function(ev){
			if(pos == 'down'){				
				$('#hvtext').removeClass('thumb-on');
				$('#hvscan').removeClass('thumb-on');
				$('#hvmic').removeClass('thumb-on');
				
				$('.submenu, .entry').removeClass('mendown');
				$('.submenu, .entry').addClass('menup');
				
				$('.thtext').hammer({prevent_default:true}).bind('tap', function(ev){
					$('#hvtext').addClass('thumb-on');
				});
				$('.thscan').hammer({prevent_default:true}).bind('tap', function(ev){
					$('#hvscan').addClass('thumb-on');
				});
				$('.thmic').hammer({prevent_default:true}).bind('tap', function(ev){
						$('#hvmic').addClass('thumb-on');
				});

				pos = 'up';
			}else{
				$('.submenu').removeClass('menup');
				$('.submenu').addClass('mendown');
				pos = 'down';
			}
		});
	});
});



function onLoad(){
     document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady(){
    window.plugins.speechrecognizer.init(speechInitOk, speechInitFail);
    // etc.
}

function speechInitOk() {
	supportedLanguages();
	recognizeSpeech();
}

function speechInitFail(m) {
	alert(m);
}

// Show the list of the supported languages
function supportedLanguages() {
	window.plugins.speechrecognizer.getSupportedLanguages(function(languages){
			// display the json array
			alert(languages);
		}, function(error){
			alert("Could not retrieve the supported languages");
	});
}

function recognizeSpeech() {
    var requestCode = 1234;
    var maxMatches = 5;
    var promptString = "Detta i parametri ";	// optional
	var language = "it";						// optional
    window.plugins.speechrecognizer.startRecognize(speechOk, speechFail, requestCode, maxMatches, promptString, language);
}

function speechOk(result) {
    var respObj, requestCode, matches;
    if (result) {
         respObj = JSON.parse(result);
        if (respObj) {
            var matches = respObj.speechMatches.speechMatch;
            
            for (x in matches) {
                alert("possible match: " + matches[x]);
                // regex comes in handy for dealing with these match strings
            }
        }        
    }
}

function speechFail(message) {
    console.log("speechFail: " + message);
}
var scanCode = function() {
    window.plugins.barcodeScanner.scan(
        function(result) {
        alert("Scanned Code: " + result.text 
                + ". Format: " + result.format
                + ". Cancelled: " + result.cancelled);
    }, function(error) {
        alert("Scan failed: " + error);
    });
}
</script>
</head>

<body onload="onLoad();">
<div class="wrapper">
	<div id="main">
		<header>
			<ul class="menu">
				<li class="central censearch">
					<a href="#" title="">
						<span class="left"><span class="right"><span class="tail">
							<span class="icon"></span>
						</span></span></span>
						
						<ul class="submenu">
							<li class="entry thtext">
								<div class="thumb-in" id="hvtext">
									<a href="#" title="">
										<img width="60" height="60" src="images/t1.png" class="thumb" alt="" />
									</a>
								</div>
							</li>
							<li class="entry thscan">
								<div class="thumb-in" id="hvscan">
									<a href="#" title="">
										<img width="60" height="60" src="images/t2.png" class="thumb" alt="" />
									</a>
								</div>
							</li>
							<li class="entry thmic">
								<div class="thumb-in" id="hvmic">
									<a href="#" title="">
										<img width="60" height="60" src="images/t3.png" class="thumb" alt="" />
									</a>
								</div>
							</li>
						</ul>						
					</a>
				</li>
			</ul>
			
			<ul class="sx-menu left test">
				<li class="central">
					<a href="#" onclick="scanCode();">
						<span class="left"><span class="right"><span class="tail">
							<span class="prefer"></span>
						</span></span></span>
					</a>
				</li>
			</ul>
			
			<ul class="sx-menu right test">
				<li class="central">
					<a href="#">
						<span class="left"><span class="right"><span class="tail">
							<span class="map"></span>
						</span></span></span>
					</a>
				</li>
			</ul>
		</header>
	</div>
</div>
</body>
</html>